<template>
  <div>
    <div style="height: 40vh" ref="pieCharts"></div>
  </div>
</template>
<script>
require("echarts/theme/macarons"); // echarts theme
import resize from "./mixins/resize";
import * as echarts from "echarts";
export default {
  mounted() {
    this.getData();
  },
  mixins: [resize],
  data() {
    return {
      cqWidth: "",
      cqHeight: "",
    };
  },

  methods: {
    getData() {
      // // 初始化统计图对象
      console.log("cqWidth", this.cqWidth);
      var pieCharts = echarts.init(this.$refs["pieCharts"]);

      const option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c}户",
        },
        legend: {
          orient: "vertical",
          // x: "right",
          right: 12,
          top:'20%',
          data: ["摄像头", "三脚架", "滑轨", "麦克风", "声卡"],
          textStyle: {
            //图例文字的样式
            color: "#FFFFFF",
            // fontSize: 16,
          },
        },
        color: [
          "#47B1B1",
          "#F8B448",
          "#47B1B1",
          "#F8B448",
          "#47B1B1",
          "#F8B448",
        ], // 自定义颜色
        series: [
          {
            name: "分类情况",
            type: "pie",
            minAngle: 10, // 最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互
            radius: ["80%", "50%"],
            center: ["48%", "56%"],
            label: {
              show:true,//显示标签
              position:'inside',//将标签置于饼图内
              offset: [5, 5],  // 向下偏移 5pt（x轴不偏移，y轴偏移5pt）
              formatter: "{b|{b}}\n（{c}个）\n", // 这里的设置就是饼图的标签内容及其格式
              rich: {
                b: {
                  align: "center",
                },
              },
              textStyle: {
                //图例文字的样式
                color: "#FFFFFF",
                // fontSize: 16,
              },
            },
            data: [
              { value: 20, name: "摄像头" },
              { value: 40, name: "三脚架" },
              { value: 40, name: "滑轨" },
              { value: 40, name: "麦克风" },
              { value: 40, name: "声卡" },
            ],
          },
        ],
      };
      pieCharts.setOption(option);
    },
  },
};
</script>
